<template>
  <div class="pay" :style="{ background: 'url(' + bg + ') no-repeat' }">
    <hry-header title="付款" :showBackBtn="true" :needBackground="false">
      <div slot="content">
        <div class="money-wrapper">
          <span>{{
            $route.name === "personPay" ? "待支付金额" : "待支持金额"
          }}</span
          ><br />
          <span class="pay-money"
            ><span class="icon">￥</span>
            <md-amount
              :value="parseFloat(info.money)"
              :duration="200"
              has-separator
              transition
            ></md-amount
          ></span>
        </div>
        <div class="form-wrapper">
          <md-field>
            <md-input-item
              title="订单编号"
              :value="info.order_sn"
              align="right"
              readonly
            ></md-input-item>
            <md-input-item
              title="创建时间"
              :value="info.create_times"
              align="right"
              readonly
            ></md-input-item>
            <md-input-item
              title="支付账户"
              :value="info.mobile"
              align="right"
              readonly
            ></md-input-item>
            <md-input-item
              title="验证码"
              placeholder="请输入验证码"
              v-model="code"
              @focus="onFakeInputFocus"
              align="right"
            >
              <span slot="right" class="right">{{ count + "s" }}</span>
            </md-input-item>
          </md-field>
        </div>
        <footer>
          <a-button
            class="button"
            size="large"
            type="primary"
            block
            @click.native="submitOrder"
            :disabled="count === 0 || disabled ? true : false"
          >
            {{ count === 0 ? "订单已失效" : "确认支付" }}</a-button
          >
        </footer>
      </div>
    </hry-header>
    <md-popup v-model="isPopupShow" position="top">
      <div class="md-example-popup md-example-popup-center">
        <span>请输入验证码：</span>
        <md-codebox
          v-if="isPopupShow"
          v-model="code"
          :maxlength="6"
          autofocus
          @submit="submitcode"
        />
      </div>
    </md-popup>
  </div>
</template>

<script>
import bg from "@/assets/img/bg03.png";
import { Modal } from "ant-design-vue";
import { Popup, Codebox, Field, InputItem, Amount, Toast } from "mand-mobile";
import moment from "moment";
export default {
  name: "",
  components: {
    [Popup.name]: Popup,
    hryHeader: () => import("@/components/contentWrapper/index"),
    [Amount.name]: Amount,
    [InputItem.name]: InputItem,
    [Field.name]: Field,
    [Codebox.name]: Codebox
  },
  data() {
    return {
      isPopupShow: false,
      bg: bg,
      code: "",
      count: 180,
      timer: null,
      info: {
        money: 0
      },
      isError: false,
      disabled: false,
      isPending: false // 是否在充值进行中
    };
  },
  created() {
    this.confirmOrder();
  },
  methods: {
    moment,
    onFakeInputFocus() {
      document.activeElement.blur();
      this.isPopupShow = true;
    },
    submitcode() {
      this.isPopupShow = false;
    },
    countdown() {
      this.timer = setInterval(() => {
        if (this.count > 0) {
          this.count--;
        } else {
          clearInterval(this.timer);
          let that = this;
          if (this.$route.name === "personPay") {
            if (!this.isError && !this.isPending) {
              Modal.confirm({
                title: "尊敬的用户：",
                content: "验证码已失效，请重新充值",
                okText: "重新充值",
                cancelText: "返回",
                onOk() {
                  that.$router.go(-1);
                },
                onCancel() {
                  that.$router.go(-2);
                }
              });
            }
          } else {
            Modal.confirm({
              title: "尊敬的用户：",
              content: "验证码已失效，请重新认投",
              okText: "重新充值",
              cancelText: "返回",
              onOk() {
                that.$router.go(-1);
              },
              onCancel() {
                that.$router.go(-2);
              }
            });
          }
        }
      }, 1000);
    },
    submitOrder() {
      let api =
        this.$route.name === "personPay"
          ? this.$api.surePay
          : this.$api.confirmPayOrder;
      let rechargeObj = {
        order_sn: this.info.order_sn,
        code: this.code
      };
      let supportObj = {
        order_id: this.$route.params.id,
        code: this.code
      };
      let obj = this.$route.name === "personPay" ? rechargeObj : supportObj;
      if (!this.code) {
        this.$message.error("请输入验证码");
        return false;
      }
      this.disabled = true;
      let that = this;
      this.$ajax
        .post(api, obj, false, "支付中...")
        .then(() => {
          Toast.loading("支付成功！");
          setTimeout(() => {
            Toast.hide();
            if (this.$route.name === "personPay") {
              this.$router.go(-2);
            } else {
              this.$router.push({ name: "projectList" });
            }
            this.disabled = false;
          }, 1000);
        })
        .catch(err => {
          if (this.$route.name === "personPay") {
            if (err.indexOf("充值进行中") !== -1) {
              this.payAgain();
            } else {
              this.isError = true;
              Modal.confirm({
                title: "尊敬的用户：",
                content: err,
                okText: "重新充值",
                cancelText: "返回",
                onOk() {
                  that.$router.go(-1);
                },
                onCancel() {
                  that.$router.go(-2);
                }
              });
            }
          }
          this.disabled = false;
        });
    },
    payAgain(err) {
      this.isPending = true;
      let that = this;
      Toast.loading(err);
      setTimeout(() => {
        this.$ajax
          .post(
            this.$api.payAgain,
            { order_sn: this.info.order_sn },
            false,
            err
          )
          .then(res => {
            Toast.hide();
            if (res.data.status === 3) {
              this.isError = true;
              Modal.confirm({
                title: "尊敬的用户：",
                content: "充值失败",
                okText: "重新充值",
                cancelText: "返回",
                onOk() {
                  that.$router.go(-1);
                },
                onCancel() {
                  that.$router.go(-2);
                }
              });
              this.disabled = false;
            } else if (res.data.status === 4) {
              this.$message.success("充值成功!");
              this.$router.go(-2);
              this.disabled = false;
            } else {
              this.payAgain("充值进行中,请耐心等待");
            }
          })
          .catch(err => {
            Toast.hide();
            this.isError = true;
            Modal.confirm({
              title: "尊敬的用户：",
              content: err,
              okText: "重新充值",
              cancelText: "返回",
              onOk() {
                that.$router.go(-1);
              },
              onCancel() {
                that.$router.go(-2);
              }
            });
            this.disabled = false;
          });
      }, 5000);
    },
    confirmOrder() {
      let api =
        this.$route.name === "personPay"
          ? this.$api.getRechargeOrderInfo
          : this.$api.getOrderInfo;
      this.$ajax
        .post(api, {
          order_id: this.$route.params.id
        })
        .then(res => {
          this.info = res.data.order_info;
          if (this.info.current_time - this.info.order_time > 180) {
            this.count = 0;
          } else {
            this.count = 180 - (this.info.current_time - this.info.order_time);
            this.countdown();
          }
        })
        .catch(err => {
          this.$message.error(err);
        });
    }
  },
  beforeDestroy() {
    clearTimeout(this.timer);
    this.timer = null;
  }
};
</script>

<style scoped lang="less">
.pay {
  height: 100%;
  width: 100%;
  background-size: 100%, 100% !important;
  .header {
    background: transparent !important;
  }
  .money-wrapper {
    color: white;
    font-size: 30px;
    text-align: center;
    margin-top: 30px;
  }
  .pay-money {
    .icon {
      font-size: 60px;
    }
    display: inline-block;
    margin-top: 24px;
    font-size: 80px;
    font-weight: bold;
  }
  .form-wrapper {
    margin-top: 40px;
    padding: 58px 68px;
  }
  footer {
    width: 100%;
    position: fixed;
    background: @white;
    bottom: 0;
    left: 0;
    .ant-btn-lg {
      height: 95px;
      font-size: 30px;
    }
  }
}
.md-example-popup {
  position: relative;
  font-size: 28px;
  font-weight: 500;
  box-sizing: border-box;
  text-align: center;
  background-color: #fff;
}

.md-example-popup-center {
  padding: 50px;
}
.right {
  font-size: 24px;
}
</style>
